<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>吃游在线网</title>
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" href="css/jigsaw.css">

    <link rel="stylesheet" type="text/css" href="css/xcConfirm.css"/>
    <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>

    <style>
        .form-group{
            width: 310px;
        }
        .container {
            width: 310px;
            margin: 0px auto;
        }

        #msg {
            width: 100%;
            line-height: 40px;
            font-size: 14px;
            text-align: center;
        }
        a:link,a:visited,a:hover,a:active {
            margin-left: 100px;
            color: #0366D6;
        }

    </style>

</head>
<body>
<header>
    <div class="c-box fff-box">
        <div class="wp header-box">
            <p class="fl hd-tips">吃游在线网，会吃的旅游网！</p>
            <ul class="fr hd-bar">
                <li>服务电话：<span>33333333</span></li>
                <li class="active"><a href="login.html">[登录]</a></li>
                <li><a href="register.html">[注册]</a></li>
            </ul>
        </div>
    </div>
</header>

<section>
    <div class="c-box bg-box" >
        <div class="login-box clearfix" style="margin-top: 0px">
            <div class="hd-login clearfix">


                <h1 style="font-size: 40px;">用户登录</h1>
                <a class="index-font" href="home.html">回到首页</a>
            </div>

            <div class="fl slide">
                <div class="imgslide">
                    <ul class="imgs" >
                        <li ><a href="#home"><img style="margin-left: -100px" src="images/touxiang3.jpeg" /></a></li>

                    </ul>
                </div>
                <!-- <div class="unslider-arrow prev"></div>
                 <div class="unslider-arrow next"></div>-->
            </div>

            <div class="fl form-box "style="height: 580px">
                <h2>帐号登录</h2>
                <form  action="home.html" method="post" autocomplete="off" >
                    <input type='hidden' name='csrfmiddlewaretoken' value='mymQDzHWl2REXIfPMg2mJaLqDfaS1sD5' />
                    <div class="form-group marb20 ">
                        <label>用&nbsp;户&nbsp;名</label>
                        <input name="useName" id="account_l" type="text" placeholder="输入用户名" style="width: 215px"/>
                    </div>
                    <div class="form-group marb8 ">
                        <label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                        <input name="userpwd" id="password_l" type="password" placeholder="请输入您的密码" style="width: 215px" />
                    </div>
                    <div class="error btns login-form-tips" id="jsLoginTips"></div>

                    <div class="container" >
                        <div id="captcha" style="position: relative"></div>
                        <div id="msg"></div>
                    </div>
                    <input class="btn btn-green" style="width: 312px" id="jsLoginBtn" type="button" value="立即登录 > "  onclick="check()">
                    <input type='hidden' name='csrfmiddlewaretoken' value='5I2SlleZJOMUX9QbwYLUIAOshdrdpRcy' />
                </form>



                <p class="form-p">没有吃游账号？<a href="register.html">[立即注册]</a></p>
            </div>
        </div>
    </div>
</section>

<script src="js/quote/jquery-3.4.1.js" type="text/javascript"></script>
<script src="js/unslider.js" type="text/javascript"></script>
<!--<script src="js/login.js"  type="text/javascript"></script>-->
<script src="js/jigsaw.js" type="text/javascript"></script>


<script>
    jigsaw.init(document.getElementById('captcha'), function () {
        document.getElementById('msg').innerHTML = '验证成功！'
    })
</script>

<script language="JavaScript" type="text/JavaScript">

    //登录表单键盘事件
    $("#password_l").keydown(function(event){
        if(event.keyCode == 13) {
            $('#jsLoginBtn').trigger('click');
        }
    });

    function check(){

        user_name = document.getElementById("account_l").value;
        user_pwd = document.getElementById("password_l").value;
        if (user_name == '') {
            var txt=  "用户名不能为空";
            window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.info);
            event.preventDefault()
            return false; }
        if (user_pwd == '') {
            var txt=  "密码不能为空";
            window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.info);
            event.preventDefault()
            return false;
        }
        if ($("#msg").html()=="验证成功！"){
            $.post({

                url:"http://localhost:8080/user/login",
                dataType:"json", // 服务器响应json数据的时候，dataType指定为json
                // 声明发送数据的参数格式：JSON格式
                /*   contentType:"application/json",*/
                data:{"userName":user_name,"userPwd":user_pwd},
                success:function (data) {
                    if(data.code == 0){
                        window.location.href="home.html"
                    } else {
                        // 根据服务端返回，可使用其提示信息，也可以自定义
                        /*  $("#jsLoginTips").html(data.message)*/
                        alert(data.message)
                    }

                }
            })

        }


    }
</script>




</body>
</html>